<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>分类</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./lib/iconfont/iconfont.css">
   
    <link rel="stylesheet" href="./css/sort.css">
</head>
<body>
    <header class="hsch">
        <span class="iconfont icon-arrow-left"></span>
        <div class="dvch">
            <span class="iconfont icon-sousuo"></span>
                <input type="search" placeholder="程序员假发" class="dch"/>
        </div>
        
        </header>
        <main class="main">
            <!-- 左侧菜单 -->
            <ul class="cate-left">
              <li class="cate-left-item active"><a href="#cate1">热门推荐</a></li>
              <li class="cate-left-item"><a href="#cate2">手机数码</a></li>
              <li class="cate-left-item"><a href="#cate3">家用电器</a></li>
              <li class="cate-left-item"><a href="#cate4">电脑办公</a></li>
              <li class="cate-left-item"><a href="#cate5">计生情趣</a></li>
              <li class="cate-left-item"><a href="#cate6">美妆护肤</a></li>
              <li class="cate-left-item"><a href="#cate7">个护清洁</a></li>
              <li class="cate-left-item"><a href="#cate8">汽车生活</a></li>
              <li class="cate-left-item"><a href="#cate9">乐购超市</a></li>
              <li class="cate-left-item"><a href="#cate10">运动户外</a></li>
              <li class="cate-left-item"><a href="#cate11">图书音像</a></li>
              <li class="cate-left-item"><a href="#cate12">酒水饮料</a></li>
            </ul>
            <!-- 右侧 -->
            <ul class="content">
              <li class="content-item">
                <h3 id="cate1">热门推荐</h3>
                <ul>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img01.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img02.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img03.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img04.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img05.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img06.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img07.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img08.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img09.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                </ul>
              </li>
              <li class="content-item">
                <h3 id="cate2">手机数码</h3>
                <ul>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img01.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img02.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img03.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img04.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img05.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img06.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img07.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img08.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img09.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                </ul>
              </li>
              <li class="content-item">
                <h3 id="cate3">家用电器</h3>
                <ul>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img01.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img02.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img03.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img04.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img05.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img06.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img07.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img08.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img09.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                </ul>
              </li>
              <li class="content-item">
                <h3 id="cate4">电脑办公</h3>
                <ul>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img01.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img02.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img03.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img04.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img05.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img06.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img07.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img08.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img09.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                </ul>
              </li>
              <li class="content-item">
                <h3 id="cate5">计生情趣</h3>
                <ul>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img01.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img02.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img03.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img04.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img05.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img06.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img07.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img08.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img09.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                </ul>
              </li>
              <li class="content-item">
                <h3 id="cate6">美妆护肤</h3>
                <ul>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img01.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img02.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img03.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img04.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img05.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img06.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img07.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img08.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img09.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                </ul>
              </li>
              <li class="content-item">
                <h3 id="cate7">个护清洁</h3>
                <ul>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img01.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img02.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img03.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img04.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img05.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img06.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img07.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img08.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img09.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                </ul>
              </li>
              <li class="content-item">
                <h3 id="cate8">汽车生活</h3>
                <ul>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img01.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img02.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img03.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img04.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img05.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img06.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img07.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img08.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img09.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                </ul>
              </li>
              <li class="content-item">
                <h3 id="cate9">乐购超市</h3>
                <ul>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img01.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img02.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img03.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img04.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img05.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img06.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img07.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img08.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img09.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                </ul>
              </li>
              <li class="content-item">
                <h3 id="cate10">运动户外</h3>
                <ul>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img01.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img02.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img03.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img04.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img05.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img06.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img07.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img08.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img09.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                </ul>
              </li>
              <li class="content-item">
                <h3 id="cate11">图书音像</h3>
                <ul>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img01.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img02.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img03.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img04.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img05.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img06.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img07.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img08.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img09.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                </ul>
              </li>
              <li class="content-item">
                <h3 id="cate12">酒水饮料</h3>
                <ul>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img01.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img02.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img03.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img04.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img05.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img06.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img07.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img08.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <img src="./images/cagegory-img09.png" alt="">
                      <p>手机</p>
                    </a>
                  </li>
                </ul>
              </li>
            </ul>
          </main>
    <footer class="footer">
        <ul>
            <li>
                <a href="./index.html" class="">
                    <span class="iconfont icon-ziyuan"></span>
                    <p>首页</p>
                </a>
            </li>
            <li>
                <a href="./sort.html" class="active">
                    <span class="iconfont icon-fenlei"></span>
                    <p>分类</p>
                </a>
            </li>
            <li>
                <a href="./shopCart.html" class="">
                    <span class="iconfont icon-gouwuche"></span>
                    <p>购物车</p>
                </a>
            </li>
            <li>
                <a href="./my.html" class="">
                    <span class="iconfont icon-wode"></span>
                    <p>我的</p>
                </a>
            </li>
        </ul>
    </footer>
    <script src="./lib/jquery/jquery.js"></script>
    
    <script src="js/common.js"></script>
    <script src="js/sort.js"></script>
</body>
</html>